<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
  <%@ page import="java.util.*" %>
  <%@ page import="com.pojo.Product" %>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
  <%
   //response.sendRedirect("/029Web/ProductServlet");
  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
	#wordShow{
		border: 1px solid #999;
		min-height:200px;
		position:absolute;
		width: 189px;
		z-index: 10;
		background-color: #fff;
		border-radius:10px;
		left: 182px;
		display: none
	}
</style>
</head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css"
	>

<script src="js/jquery-1.11.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"
	></script>
	
	
<body>
<div class="container">
	<c:if test="${username!=null }">
		<a href="login.jsp">欢迎<%=session.getAttribute("username") %></a>
			<a href="regist.jsp">注册</a>
	</c:if>
			
	<c:if test="${username==null }">
		<a href="login.jsp">登陆</a>
			<a href="regist.jsp">注册</a>
	</c:if>
</div>
<a href="${pageContext.request.contextPath }/ToAddUIServlet" class="button">增加</a>
<button class="button" id="deleteAll">删除多个</button> 

<form>
分类:<select name="cid">
						<option value="">--选择已经有的分类--</option>
						<c:forEach items="${findAllCategory}" var="c">
							<option ${cid==c.cid?"selected='selected'":"" } value="${c.cid }">${c.cname }</option>		
	</c:forEach>
商品名称:<input type="text"  value="${pname}" id="search" name="pname">
<div id="wordShow">
		<ul id="itemul" class="list-group">
			<!-- <li class="list-group-item">HTC Desire 826d 32G 臻珠白</li>
			<li class="list-group-item">HTC Desire 826d 32G 臻珠白</li>
			<li class="list-group-item">HTC Desire 826d 32G 臻珠白</li>
			<li class="list-group-item">HTC Desire 826d 32G 臻珠白</li> -->
		</ul>
	</div>
<button type="submit">查询</button>
</form>

<table class="table">
  			<tr>
  				<td>是否多选</td>
				<td>商品id</td>
				<td>商品名字</td>
				<td>商品价格</td>
				<td>商品图片</td>
				<td>是否热门</td>
				<td>操作</td>
  			</tr>
  			<c:forEach items="${pageBean.data }" var="p">
	  			<tr>
	  				<td>
	  				<input type="checkbox" value="${p.pid }">
	  				</td>
					<td>${p.pid }</td>
					<td>${p.pname }</td>
					<td>${p.shop_price }</td>
					<td>
						<img width="45" height="45" src="${pageContext.request.contextPath }/${p.pimage }">
					</td>
					<td>${p.is_hot==1?"是热门":"不是热门" }</td>
					<td>
					<a href="${pageContext.request.contextPath }/ToUpdateUIServelt?pid=${p.pid}">修改</a>
					<a href="${pageContext.request.contextPath }/DeleteServlet?pid=${p.pid}">删除</a>
					</td>
	  			</tr>
  			</c:forEach>
  			
  		<%-- 	<%
  			List<Product> allProcut=(List<Product>)request.getAttribute("pList");
  			if(allProcut!=null){
  				for(Product p:allProcut){
  	  					out.write("<tr>");
  	  				out.write("<td>"+p.getPid()+"</td>");
  	  				out.write("<td>"+p.getPname()+"</td>");
  	  				out.write("<td>"+p.getShop_price()+"</td>");
  	  				out.write("<td>");
  	  				out.write("<img width='45' height='45' src='"+p.getPimage()+"'>");
  	  				out.write("</td>");
  	  				out.write("<td>"+p.getIs_hot()+"</td>");
  	  			}
  			}
  			
  			%> --%>
  			</table>
  			
  			  <nav aria-label="Page navigation">
  			  第${pageBean.pageNumber}/${pageBean.toalPage }页
  <ul class="pagination">
  
    <li>	
      <a href="${pageContext.request.contextPath  }/ProductServlet?pageNumber=${pageBean.pageNumber-1}" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <c:forEach begin="1" end="${pageBean.toalPage }" var="i">
      <li><a href="${pageContext.request.contextPath  }/ProductServlet?pageNumber=${i}">${i }</a></li>
    </c:forEach>
  
    
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
</body>
<script type="text/javascript">
/* var list="${pList}";
if(list.length==0){
	location.href="${pageContext.request.contextPath}/ProductServlet";
}
 */
$("#deleteAll").click(function(){
	var pids=[];
	var all=$("input[type='checkbox']:checked");
	if(all.length==0){
		alert("请选择需要删除的商品");
		return false;
	}
	if(window.confirm("你是否确定要删除"+all.length+"个商品吗?")){
		for(var i=0;i<all.length;i++){
			var procut=all[i];
			var pid=procut.value;
			pids.push(pid);
		}
		var pidss=pids.join(",");
		//请求后台
		location.href="${pageContext.request.contextPath}/deleteAllPids?pids="+pidss;
	}else{
		$("input[type='checkbox']:checked").removeProp("checked")
	}
});
 
 /* 异步搜索填充  */
 $("#search").keyup(function(){
	 var word=$(this).val();
		$.ajax( {  
		    url:'/029Web/WordPnameServlet',// 跳转到 action  
		    data:{  
		    	word : word
		    },  
		    type:'get',    
		    success:function(data) {
		    	 //console.log(data)
		    	 for( var i=0;i<data.length;i++){
		    		 var product=data[i];
		    		 var str=product.pname;
		    		 str=highlight(word,str);
		    			//<li class="list-group-item">HTC Desire 826d 32G 臻珠白</li>
		    		 $("#itemul").append("<li class='list-group-item'>"+str+"</li>")
		    		 
		    	 }
		    	 $("#wordShow").show();
		    	
		     }			
		});
 })
 
 function highlight(word,str){
	 var start="";//记录不需要或已经替换后的内容
	 var end =str;//自己了需要被替换的内容,默认是整个内容,循环一次红藕,为后半段没有被替换的内容
	 for(var i=0;i<word.length;i++){
		 //获得每一个关键字
		 var w=word.substring(i,i+1);
		 //从目标字符串中截取需要的内容,并进行替换,将字符串三个部分
		 var index=end.indexOf(w);
		 //不需要或已经替换后的内容
		 start+=end.substring(0,index);
		 //需要使用的<font>
		 start+="<font color='red'>"+w+"</font>";
		 //需要继续处理剩下的内容
		 end=end.substring(index+1,end.length);
		 
	 }
	 //追加最后不用处理的数据
	 start+=end;
	 return start;
 }
</script>
</html>